<template>
  <xdh-curd ref="role"
            :filter="true"
            filter-title="查询条件"
            :collapsible="false"
            :addable="false"
            :removable="false"
            :query.sync="query"
            listTitle="系统角色列表"
            name="sysRole"
            :handleType="'icon'"
            :rules="rules"
            :model="model"
            @on-success="successList"
            :mixin="mixin">

    <!-- 数据筛选条件 -->
    <template slot="filter-items">
      <el-form-item prop="name">
        <el-input placeholder="关键字" v-model="query.keyword"></el-input>
      </el-form-item>
    </template>

    <template slot="table-columns" slot-scope="scope">
      <el-table-column align="center" width="100" label="角色名" prop="jsmc">
      </el-table-column>
      <el-table-column align="center" label="功能模块" prop="name">
      </el-table-column>
      <el-table-column align="center" width="180" label="创建时间" prop="createdtime">
      </el-table-column>
      <el-table-column align="center" width="180" label="更新时间" prop="updateTime">
      </el-table-column>
      <el-table-column align="center" width="80" label="是否启用">
        <template slot-scope="scope">
          <el-tag size="mini" type='success' v-if="scope.row.deleteflag === '0'">启用</el-tag>
          <el-tag size="mini" type="warning" v-else>禁用</el-tag>
        </template>
      </el-table-column>
    </template>
    <!-- 数据新增编辑弹窗 -->
    <template slot="dialog-form-items"
              slot-scope="prop">
      <el-row>
        <el-col :span="24">
          <el-form-item label="角色名称" prop="jsmc">
            <el-input v-model="prop.model.jsmc"></el-input>
          </el-form-item>
          <el-form-item label="是否启用" prop="deleteflag">
            <el-radio-group v-model="prop.model.deleteflag">
              <el-radio :label="'0'">启用</el-radio>
              <el-radio :label="'1'" fill="#F56C6C">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="功能">
            <xdh-tree-select :data="treeList"
                             :props="defaultProps"
                             :check-strictly="true"
                             :node-key='nodeId'
                             :value="prop.model.jsnr"
                             :default-expand-all="false"
                             @on-selected="onSelectRole"></xdh-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </xdh-curd>
</template>


<script>
  import XdhCurd from '../../widgets/xdh-curd'
  import XdhTreeSelect from '../../widgets/xdh-tree-select'
  import sysRole from '../../base/mixin/sys-role'

  export default {
    components: {
      XdhCurd,
      XdhTreeSelect
    },
    mixins: [sysRole],
    filters: {},
    data() {
      return {
        query: {
          keyword: ''// 操作结果
        },
        model: {
          jsmc: '',
          deleteflag: '0'
        },
        treeList: [],
        mixin: sysRole,
        rules: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        nodeId: 'pkValue'
      }
    },
    methods: {
      onSelectRole(row) {
        let arr = [];
        row.forEach(list => {
          arr.push(list.pkValue)
        })
        this.$refs.role.currentModel.jsnr = arr
      },
      /**
       * 列表数据请求成功回调
       */
      successList(type, data) {
        this.$refs.role.reload()
      }
    },
    mounted() {
      this.getRoleTree().then(res => {
        this.treeList = res;
      })
    },
    created() {
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
  .demos-table-expand {
    font-size: 0;
  }

  .demos-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demos-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .demos-table {
    text-align: center;
  }

  .el-self {
    display: block;
  }
</style>

